<template>
	<view class="bulletin">
		<p-navbar background="#001429" :title="type=='0'?'策略解析':'量化教程'"></p-navbar>
		<view class="bulletin-content">
			<view class="bulletin-item flex" v-for="(item,index) in bulletinList" :key="index">
				<view class="bulletin-left">
					<view class="bulletin-text">
						{{item.content}}  {{`(${index+1})`}}
					</view>
					<view class="bulletin-readNumber">
						{{item.time}}
					</view>
				</view>
				<view class="bulletin-right">
					<image src="../../static/college/new1.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bulletinList:[
					{
						content:'比特币价格再次突破4万美元',
						time:'2021/02/19 12:00'
					},
					{
						content:'比特币价格再次突破4万美元比特币价格再次突破4万美元',
						time:'2021/02/19 12:00'
					},
				],
				type:'',
			}
		},
		methods: {
			
		},
		onLoad(options) {
		  this.type = JSON.parse(options.type);
		},
	}
</script>

<style lang="scss">
	.bulletin{
		.bulletin-title{
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
			position: relative;
			padding-left: 20rpx;
			text{
				color: #FF8128;
			}
			&::after{
				content: "";
				height: 40rpx;
				border: 2px solid #FF8128;
				position: absolute;
				left: 0;
				top: 0;
				border-radius: 6px;
			}
		}
		.bulletin-content{
			width: 678rpx;
			margin: 34rpx auto 0;
			border-radius: 32rpx;
			box-sizing: border-box;
			.bulletin-item{
				margin-bottom: 36rpx;
				.bulletin-left{
					width: 352rpx;
					.bulletin-text{
						margin-bottom: 52rpx;
						font-size: 28rpx;
						font-family: PingFang;
						font-weight: bold;
						color: #FFFFFF;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
					.bulletin-readNumber{
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: bold;
						color: rgba(255, 255, 255, 0.3);
					}
					&:last-child{
						margin-bottom: 0;
					}
				}
				.bulletin-right{
					margin-left: auto;
					width: 240rpx;
					height: 160rpx;
					image{
						width: 100%;
						height: 100%;
					}
					
				}
			}
		}
	}
</style>
